<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>121-css-旋转-旋转菜单.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.wrap{
			width: 380px;
			margin: 50px auto;
		}
		.content{
			width: 380px;
			height: 600px;
			background-color: skyblue
		}
		.nav{
			list-style: none;
			height: 40px;
			background-color: gray;
		}
		.nav>li{
			width: 100px;
			height: 40px;
			line-height: 40px;
			margin-left: 20px;
			float: left;
			background-color: yellow;
			text-align: center;
		}
		.sub>li{
			width: 100px;
			height: 40px;
			line-height: 40px;
			background-color: green;
			transform: rotateY(180deg);
			opacity: 0;
			transition: all 2s;
		}
		.nav>li:hover .sub>li{
			transform: rotateY(0deg);
			opacity: 1;
		}
		.nav>li:hover .sub>li:nth-child(1){
			transition-delay: 0ms;
		}
		.nav>li:hover .sub>li:nth-child(2){
			transition-delay: 200ms;
		}
		.nav>li:hover .sub>li:nth-child(3){
			transition-delay: 400ms;
		}
		.nav>li:hover .sub>li:nth-child(4){
			transition-delay: 600ms;
		}
		.nav>li:hover .sub>li:nth-child(5){
			transition-delay: 800ms;
		}
		.sub>li:nth-child(5){
			transition-delay: 0ms;
		}
		.sub>li:nth-child(4){
			transition-delay: 200ms;
		}
		.sub>li:nth-child(3){
			transition-delay: 400ms;
		}
		.sub>li:nth-child(2){
			transition-delay: 600ms;
		}
		.sub>li:nth-child(1){
			transition-delay: 800ms;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul class="nav">
			<li>
				一级菜单1
				<ul class="sub">
					<li>二级菜单1</li>
					<li>二级菜单2</li>
					<li>二级菜单3</li>
					<li>二级菜单4</li>
					<li>二级菜单5</li>
				</ul>
			</li>
			<li>
				一级菜单2
				<ul class="sub">
					<li>二级菜单1</li>
					<li>二级菜单2</li>
					<li>二级菜单3</li>
					<li>二级菜单4</li>
					<li>二级菜单5</li>
				</ul>
			</li>
			<li>
				一级菜单3
				<ul class="sub">
					<li>二级菜单1</li>
					<li>二级菜单2</li>
					<li>二级菜单3</li>
					<li>二级菜单4</li>
					<li>二级菜单5</li>
				</ul>
			</li>
		</ul>
		<div class="content">
			内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
		</div>
	</div>
</body>
</html>